<template>
	<view class="home-address">
		<view class="select-item select-item-send" @click="selectAddress(1)">
			<view class="select-icon select-icon-send">
				寄
			</view>
			<view class="select-text">
				<view class="select-text-title">
					{{sendTitle}}
				</view>
				<view class="select-text-desc">
					{{sendDesc}}
				</view>
			</view>
			<u-icon name="arrow-right" size="30rpx"></u-icon>
		</view>
		<view class="select-item select-item-recive" @click="selectAddress(2)">
			<view class="select-icon select-icon-recive">
				送
			</view>
			<view class="select-text">
				<view class="select-text-title">
					{{reciveTitle}}
				</view>
				<view class="select-text-desc">
					{{reciveDesc}}
				</view>
			</view>
			<u-icon name="arrow-right" size="30rpx"></u-icon>
		</view>
		
		<SelectAddress ref="selectAddressRef" />
	</view>
</template>

<script>
	import SelectAddress from './select-address.vue'
	export default {
		data() {
			return {
				sendData: {
					address: '',
					username: '',
					phone: ''
				},
				reciveData: {
					address: '',
					username: '',
					phone: ''
				},
			}
		},
		components: {
			SelectAddress
		},
		computed: {
			sendTitle() {
				return this.sendData.address || '去哪儿取'
			},
			sendDesc() {
				return this.sendData.username ? `${this.sendData.username} ${this.sendData.phone}` : '快递员去哪里取衣送洗'
			},
			reciveTitle() {
				return this.reciveData.address || '送回哪儿'
			},
			reciveDesc() {
				return this.reciveData.username ? `${this.reciveData.username} ${this.reciveData.phone}` : '快递员去哪里取衣送洗'
			},
		},
		methods: {
			selectAddress(type) {
				const title = type == 1 ? '取衣地址' : '送回地址'
				const params = {
					title
				}
				this.$refs.selectAddressRef.openModal(params)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.home-address {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 48rpx 20rpx;
		width: 85vw;
		margin: 0 auto;
	}

	.select-item {
		margin-bottom: 56rpx;
		display: flex;
		align-items: center;
		&-recive {
			margin-bottom: 0;
		}
	}

	.select-text {
		margin: 0 20rpx;
		flex: 1;
		&-title {
			font-size: 32rpx;
			display: -webkit-box!important;
			overflow: hidden;
			text-overflow: ellipsis;
			word-break: break-all;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical!important;
		}
		&-desc {
			margin-top: 8rpx;
			font-size: 26rpx;
			color: #999;
		}
	}

	.select-icon {
		width: 90rpx;
		height: 90rpx;
		border-radius: 45rpx;
		font-size: 36rpx;
		text-align: center;
		line-height: 90rpx;
		box-sizing: border-box;

		&-send {
			color: #4D4366;
			background-color: #FFCA30
		}

		&-recive {
			color: #fff;
			background-color: #4D4366
		}
	}
</style>